import React from 'react'
// import common from '@/assets/toDo.css' //eslint-disable-line
export default class ToDoList extends React.Component{
    constructor(props){
        super(props)
        this.state={
            ToDoArr:[],//即将去做的
            DoneArr:[],//完成的事件
            task:'',//每个单独任务
        }
    }
    // 【功能】:添加即将要做的事情
    add(e){
        let { 
            ToDoArr,
            task
        }=this.state
        if(task){
            console.log(task);
            let list = { id: Date.now(), task }
            if(e.keyCode==13){
                this.setState({
                    ToDoArr: [...ToDoArr,list],
                    task:''
                })
                console.log(ToDoArr);
            }
        }
    }
    // 【功能】:判断传过来的类型，根据类型决定是把toDo里面的转到Done,还是把Done里面的转到toDo
    changeDone(e,type){
        let { ToDoArr,DoneArr } = this.state
        let id =e.target.value
        console.log(id);
        e.preventDefault()
        this.setState({
            ToDoArr: type == 'toDo' ? ToDoArr.filter(ele => ele.id != id) : [...ToDoArr, ...DoneArr.filter(ele => ele.id == id)],
            DoneArr: type == 'toDo' ? [...DoneArr, ...ToDoArr.filter(ele => ele.id == id)] : DoneArr.filter(ele => ele.id != id),
            id:id
        })
    }
    // 【功能】删除对应的内容
    del(id,type){
        let { ToDoArr, DoneArr } = this.state
        if (type == 'toDo'){
            this.setState({
                ToDoArr: ToDoArr.filter(ele => ele.id != id),
            })
        } else if (type == 'done'){
            this.setState({
                DoneArr: DoneArr.filter(ele => ele.id != id)
            })
        }else{
            this.setState({
                ToDoArr: [],
                DoneArr:[]
            })
        }
    }
    // 【功能】用来绑定onChange
    change(e,k,i){
        
        if(typeof i != 'number'){
            this.setState({
                [k]:e.target.value
            })
        }else{
            this.state.ToDoArr[i].task = e.target.value
            this.setState({})
        }
    }
    render(){
        let {
            ToDoArr,
            DoneArr,
            task,
        }=this.state
        return(
            <div id="bpp">
                <header>
                    <section>
                        <label>ToDoList</label>
                        <input
                            value={task}
                            type="text" 
                            onKeyUp={_=>this.add(_)} 
                            onChange={_=>this.change(_,'task')}
                            placeholder="添加ToDo"/>
                    </section>
                </header>
                <section>
                    <h2>正在进行
                        <span id="nowCount">{ToDoArr.length}</span>
                    </h2>
                    <ol className="demo-box" >
                        {
                            ToDoArr.map((ele,idx)=>(
                                <li draggable="true" key={idx}>
                                    <input 
                                        onClick={_=>this.changeDone(_,'toDo')} 
                                        type="checkbox"
                                        value={ele.id}
                                        
                                    />
                                    <input 
                                        type='text' 
                                        value={ele.task}
                                        onChange={_ => this.change(_,'task',idx)}
                                    />
                                    {/* <p>{ele.task}</p> */}
                                    <a onClick={()=>this.del(ele.id,'toDo')}>-</a>
                                </li>
                            ))
                        }
                    </ol>
                        <h2>已经完成
                        <span id="doneCount">{DoneArr.length}</span>
                        </h2>
                        <ul className="demo-box" >
                            {
                                DoneArr.map((ele,idx)=>(
                                    <li key={idx} draggable="true">
                                        <input
                                            onChange={(_) => this.changeDone(_,'done')}
                                            type="checkbox"
                                            checked
                                            value={ele.id}
                                        />
                                        <p>{ele.task}</p><a onClick={() => this.del(ele.id, 'done')}>-</a>
                                    </li>
                                ))
                            }
                        </ul>
                </section >
                <footer>
                    Copyright © 2014 todolist.cn <a onClick={() => this.del()}>clear</a>
                </footer >
            </div >
        )
    }
}